/**
 * @Author: lusx
 * @Date:   14-03-2019 11:10:59
 * @Project: Govern督办
 * @Last modified by:   lusx
 * @Last modified time: 28-03-2019 05:47:20
 */
import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import { withRouter } from "react-router-dom";
import { RichEditor, Tools } from "weaver-mobile";
import { Base64 } from "js-base64";
import HocRouteLayout from "../hocs/hocRouteLayout.js";
import ComTextContianer from "../comTextContianer/comTextContianer.js";
const getLabel = Tools.getLabel;

//只读/编辑富文本
//@inject("actionSheetStore")
@inject("mainStore")
@withRouter
@observer
@HocRouteLayout
export default class ComreRichText extends Component {
  constructor(props) {
    super(props);
    this.richEditorRef = null;
    this.state = {
      data:
      this.props.mainStore.actionSheetStore.richEValue[props.domkey]!={}
          ? this.props.mainStore.actionSheetStore.richEValue[props.domkey]
          : Base64.decode(props.field.value) //上次未保存数据不会丢失
    };
  }
  componentDidMount() {}
  componentWillUnmount() {}
  render() {
    const {
      field: { viewAttr = 2, value="" },
      mainStore: {actionSheetStore: { setRichEValue }},domkey
    } = this.props;
    let reactEle = null;
    if (viewAttr === 1) {
      reactEle = (
        <div
          className="g-comreRichText-read ql-editor"
          dangerouslySetInnerHTML={{
            __html: `${Base64.decode(value)}`.length > 0 ? `<div style='background-color: #fff;padding: 10px'>${Base64.decode(value)}</div>` : "<div style='background-color: #fff;padding: 10px'><p style='color:#bfbfbf'>无数据</p></div>"
          }}
        />
      );
    } else {
      reactEle = (
        <div className="g-comreRichText-edit ql-editor">
          <RichEditor
            height={200}
            modules={{ toolbar: false }}
            placeholder={getLabel("230", "请输入")}
            getRef={ref => (this.richEditorRef = ref)}
            data={this.state.data|| ''}
            onEditorBlur={(FocusEvent) => {
              //xk:解决变更 富文本必填时，输入空依旧都能保存问题
              this.richEditorRef.state.value = this.richEditorRef.state.value == '<p><br></p>'?'':this.richEditorRef.state.value;
              setRichEValue({[domkey]:this.richEditorRef.state.value},this.props.comForm);
            }}
          />
        </div>
      );
    }
    return <ComTextContianer className="g-comreRichText" top={reactEle} />;
  }
}
